<template>
  <div class="refund">
    <div class="topnote">
      <h1>退款</h1>
    </div>
    <div class="contenBot">
      <div class="search">
        <el-select v-model="value" slot="prepend" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="orderNum" label="订单号" width="180">
        </el-table-column>
        <el-table-column prop="orderTime" label="订单日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="客户"> </el-table-column>
        <el-table-column prop="driverName" label="司机"> </el-table-column>
        <el-table-column prop="serverType" label="服务类型"> </el-table-column>
        <el-table-column prop="orderMoney" label="订单金额"> </el-table-column>
        <el-table-column prop="refundMoney" label="退款金额"> </el-table-column>
        <el-table-column prop="refundStatus" label="订单状态">
        </el-table-column>
        <el-table-column prop="reason" label="理由" width="130px">
        </el-table-column>
        <el-table-column prop="applicationTime" label="申请时间">
        </el-table-column>
        <!-- <el-table-column label="操作">
          <el-button type="primary" @click="dialogFormVisible = true"
            >退款操作</el-button
          >
        </el-table-column> -->
      </el-table>
      <!-- Form -->
      <!-- <el-dialog title="退款操作" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
          style="width: 300px; margin-top: 30px"
        >
          <el-form-item label="选择订单编号" prop="orderNum">
            <el-select v-model="ruleForm.orderNum" placeholder="请选择订单编号">
              <el-option
                v-for="item in orderNum"
                :key="item.id"
                :label="item.orderNum"
                :value="item.orderNum"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否退款" prop="refundStatus">
            <el-col :span="20">
              <el-select
                v-model="ruleForm.refundStatus"
                placeholder="请选择"
                class="input1"
              >
                <el-option
                  v-for="item in ruleForm.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="理由" prop="reason">
            <el-input
              v-model="ruleForm.reason"
              placeholder="请输入理由"
            ></el-input>
          </el-form-item>
          <div>
            <el-button type="primary" style="margin-left: 50px" @click="tuikuan"
              >确定</el-button
            >
            <el-button
              style="margin-left: 40px"
              @click="dialogFormVisible = false"
              >取消</el-button
            >
          </div>
        </el-form>
      </el-dialog> -->
    </div>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      tableData: [],
      orderNum: [],
      current: 1,
      total: 0,
      pageSize: 10,
      count: 0,
      data: {
        limit: this.pageSize,
        page: 1,
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        orderNum: "",
        reason: "",
        options: [
          {
            value: "已拒绝",
            label: "拒绝",
          },
          {
            value: "退款完成",
            label: "退款",
          },
        ],
      },

      options: [
        {
          value: "退款中",
          label: "退款中",
        },
        {
          value: "退款完成",
          label: "退款完成",
        },
        {
          value: "已拒绝",
          label: "已拒绝",
        },
      ],
      value: [],
    };
  },
  created() {
    this.$axios({
      url: "/refund/list",
      method: "post",
      data: {
        limit: this.pageSize, //每页几条数据
        page: this.page,
      },
    }).then((res) => {
      // console.log(res);
      if (res.data.code === 0) {
        this.tableData = res.data.data;
        // console.log(this.total);
        // console.log(res.data.data.length);
        this.total = res.data.data.length;
      }
    });

    //退款操作
    this.$axios({
      url: "/refund/list",
      method: "post",
      data: { limit: this.count },
    }).then((res) => {
      // console.log(res);
      this.orderNum = [...res.data.data];
      // console.log(this.orderNum);
    });
  },

  methods: {
    //根据列表查询
    search() {
      this.$axios({
        url: "/refund/findByRefundStatus",
        method: "post",
        data: {
          refundStatus: this.value,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.code === 0) {
          this.tableData = res.data.data;
          this.count = res.data.data.length;
        }
      });
    },

    //修改订单状态
    tuikuan() {
      this.$axios({
        url: "/refund/updateStatusByOrderNum",
        method: "post",
        data: {
          orderNum: this.ruleForm.orderNum,
          refundStatus: this.ruleForm.refundStatus,
          reason: this.ruleForm.reason,
        },
      }).then((res) => {
        if (res.data.code === 0) {
          alert("成功");
        }
      });
      this.dialogFormVisible = false;
    },
    //分页
    handleCurrentChange(val) {
      let data = this.data;
      data.page = val;
      this.pageP(data);
    },
    pageP() {
      this.$axios({
        url: "/refund/findByRefundStatus",
        method: "post",
        data: this.data,
      }).then((res) => {
        // console.log(res);
        if (res.data.code === 0) {
          this.tableData = res.data.data;
          this.total = res.data.count;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.refund {
  height: 66px;
  td:nth-of-type(11) {
    button:nth-of-type(2) {
      margin-left: 0px;
    }
  }
}
.refund {
  height: 120px;
}
.refund {
  .contenBot {
    width: 98%;
    margin: 0 auto;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
  }
}
header {
  font-size: 32px;
  font-weight: bold;
  line-height: 46px;
  margin-bottom: 20px;
}
.search {
  margin: 1rem 0;
  .el-input {
    width: 30%;
    margin-right: 10px;
  }
  .el-button {
    margin-left: 20px;
  }
  .el-table {
    // margin-top: 20px;
    // margin-bottom: 30px;
    .el-button {
      //   padding: 6px;
      text-align: center;
    }
  }
}
.el-pagination {
  margin-left: 40%;
}
.el-breadcrumb {
  margin-left: 1%;
  font-size: 20px;
}
</style>